<template>
  <view class="container">
    <!-- 轮播图组件 -->
    <banner-swiperRef />
    <!-- 头部区域 -->
    <view
      class="header"
      :style="{
        top: headerTop + 'px',
        right: headerRight + 'px',
        width: headerWidth,
      }"
    >
      <image
        class="header-img"
        src="/static/backimg/rentalImage.png"
        mode="aspectFill"
      ></image>
      <view class="header-search">
        <!-- 搜索组件 -->
        <search @search="handleSearch" />
      </view>
    </view>
    <!-- 内容区域 -->
    <view class="content">
      <main-component />
      <shop-list :getShopList="getShopList" />
      <!-- 数据加载状态 -->
      <up-loadmore :status="loading" />
    </view>
  </view>
</template>

<script setup lang="ts">
import bannerSwiperRef from "@/components/swiper/index.vue";
import search from "@/components/search/index.vue";
import mainComponent from "./components/main.vue";
import shopList from "@/components/shoplist/shoplist.vue";
import { ref, onMounted, reactive } from "vue";
import { getSearch } from "@/api/use";
import { onReachBottom } from "@dcloudio/uni-app";
const headerTop = ref(0);
const headerRight = ref(0);
const headerWidth = ref("70%");
const getShopList = ref<any[]>([]);
const loading = ref<"loading" | "loadmore" | "nomore">("loadmore");
const pagination = reactive({
  pageNum: 1,
  pageSize: 5,
  total: 0,
});

const handleSearch = (value: any, isLoadMore = false) => {
  if (!isLoadMore) {
    pagination.pageNum = 1;
    getShopList.value = [];
  }
  const params = {
    pageNum: pagination.pageNum,
    pageSize: pagination.pageSize,
    context: value,
  };
  getSearch(params).then((res) => {
    const newData = res.data.content.filter(
      (item: any) =>
        !getShopList.value.some(
          (existingItem: any) => existingItem.id === item.id
        )
    );
    if (isLoadMore) {
      getShopList.value = [...getShopList.value, ...newData];
    } else {
      getShopList.value = newData;
    }
    pagination.total = res.data.totalElements;
    loading.value =
      getShopList.value.length >= pagination.total ? "nomore" : "loadmore";
  });
};
// 获取胶囊按钮位置信息
const getMenuButtonBoundingClientRect = () => {
  // #ifdef MP-WEIXIN
  uni.getSystemInfo({
    success: (systemInfo) => {
      const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
      // 计算header位置
      headerTop.value = menuButtonInfo.top;
      headerRight.value = systemInfo.screenWidth - menuButtonInfo.left;
      headerWidth.value = `${menuButtonInfo.left - 30}px`;
    },
  });
  // #else
  // H5或App端默认位置
  headerTop.value = 25;
  headerRight.value = 20;
  headerWidth.value = "70%";
  // #endif
};
onReachBottom(() => {
  if (getShopList.value.length >= pagination.total) {
    loading.value = "nomore";
  } else {
    loading.value = "loading";
    pagination.pageNum += 1;
    handleSearch(null, true);
  }
});
onMounted(() => {
  pagination.pageNum = 1;
  getMenuButtonBoundingClientRect();
  handleSearch(null);
});
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  position: relative;
  .header {
    position: absolute;
    top: 20rpx;
    height: 32px;
    display: flex;
    align-items: center;
    left: 30rpx;
    gap: 20rpx;
    z-index: 10;

    .header-img {
      width: 68rpx;
      height: 60rpx;
    }

    .header-search {
      flex: 1;
    }
  }
}
</style>
